<template>
  <div class="moment-form common-mobile-view">
    <el-form ref="formRef" :model="foodStore.currentMoment"
             :rules="rules" label-width="55">
      <el-form-item label="内容" prop="content">
        <el-input v-model="foodStore.currentMoment.content"
                  type="textarea" :rows="3"
                  :maxlength="100" show-word-limit
                  placeholder="请输入内容"/>
      </el-form-item>

      <el-form-item label="图片">
        <upload-image v-model="foodStore.currentMoment.imageList"
                      :service-url="fileServiceUrl"
                      :image-limit="9"
                      :multiple="true"
                      :service-file-root-path="serviceFileRootPath"
                      :image-path="foodStore.imagePath"/>
      </el-form-item>
    </el-form>

    <div class="button-container">
      <el-button type="primary" @click="confirmClick">确认</el-button>
      <el-button v-if="foodStore.momentApiType === 'UPDATE'"
                 type="danger" @click="deleteClick">删除</el-button>
      <el-button type="info" @click="cancelClick">取消</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { UploadImage } from 'vue3-common'
import { useFoodStore } from '@/store/food.ts'
import { ref, reactive } from 'vue'
import type { FormRules } from 'element-plus'
import { foodMomentRules } from '@/utils/element/elRules'
import { fileServiceUrl, serviceFileRootPath } from '@/utils'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'

const rules = reactive<FormRules>(foodMomentRules)

const formRef = ref()
const foodStore = useFoodStore()

/**
 * 点击确认按钮
 */
const confirmClick = () => {
  formRef.value.validate().then(async () => {
    await foodStore.handleMomentApi(foodStore.currentMoment)
    history.back()
  })
}

const cancelClick = () => {
  history.back()
}

const deleteClick = () => {
  commonElMessageBox('是否确认删除该朋友圈?').then(async () => {
    foodStore.momentApiType = 'DELETE'
    await foodStore.handleMomentApi(foodStore.currentMoment)
    history.back()
  })
}
</script>

<style lang="scss">
.moment-form {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .button-container {
    align-self: center;
  }
}
</style>
